<template>
  <text
    v-if="text"
    :class="
      inverted
        ? 'uni-badge--' +
          type +
          ' uni-badge--' +
          size +
          ' uni-badge--' +
          type +
          '-inverted'
        : 'uni-badge--' + type + ' uni-badge--' + size
    "
    :style="badgeStyle"
    class="uni-badge"
    @click="onClick()"
    >{{ text }}</text
  >
</template>

<script>
/**
 * Badge 数字角标
 * @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
 * @tutorial https://ext.dcloud.net.cn/plugin?id=21
 * @property {String} text 角标内容
 * @property {String} type = [default|primary|success|warning|error] 颜色类型
 * 	@value default 灰色
 * 	@value primary 蓝色
 * 	@value success 绿色
 * 	@value warning 黄色
 * 	@value error 红色
 * @property {String} size = [normal|small] Badge 大小
 * 	@value normal 一般尺寸
 * 	@value small 小尺寸
 * @property {String} inverted = [true|false] 是否无需背景颜色
 * @event {Function} click 点击 Badge 触发事件
 * @example <uni-badge text="1"></uni-badge>
 */
export default {
  name: 'UniBadge',
  props: {
    type: {
      type: String,
      default: 'default',
    },
    inverted: {
      type: Boolean,
      default: false,
    },
    text: {
      type: [String, Number],
      default: '',
    },
    size: {
      type: String,
      default: 'normal',
    },
  },
  data() {
    return {
      badgeStyle: '',
    }
  },
  watch: {
    text() {
      this.setStyle()
    },
  },
  mounted() {
    this.setStyle()
  },
  methods: {
    setStyle() {
      this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
    },
    onClick() {
      this.$emit('click')
    },
  },
}
</script>

<style lang="scss" scoped>
$bage-size: 12px;
$bage-small: scale(0.8);
$bage-height: 20px;

.uni-badge {
  /* #ifndef APP-PLUS */
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  /* #endif */
  justify-content: center;
  flex-direction: row;
  height: $bage-height;
  line-height: $bage-height;
  color: $uni-text-color;
  border-radius: 100px;
  background-color: $uni-bg-color-hover;
  background-color: transparent;
  text-align: center;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  font-size: $bage-size;
  padding: 0px 6px;
}

.uni-badge--inverted {
  padding: 0 5px 0 0;
  color: $uni-bg-color-hover;
}

.uni-badge--default {
  color: $uni-text-color;
  background-color: $uni-bg-color-hover;
}

.uni-badge--default-inverted {
  color: $uni-text-color-grey;
  background-color: transparent;
}

.uni-badge--primary {
  color: $uni-text-color-inverse;
  background-color: $uni-color-primary;
}

.uni-badge--primary-inverted {
  color: $uni-color-primary;
  background-color: transparent;
}

.uni-badge--success {
  color: $uni-text-color-inverse;
  background-color: $uni-color-success;
}

.uni-badge--success-inverted {
  color: $uni-color-success;
  background-color: transparent;
}

.uni-badge--warning {
  color: $uni-text-color-inverse;
  background-color: $uni-color-warning;
}

.uni-badge--warning-inverted {
  color: $uni-color-warning;
  background-color: transparent;
}

.uni-badge--error {
  color: $uni-text-color-inverse;
  background-color: $uni-color-error;
}

.uni-badge--error-inverted {
  color: $uni-color-error;
  background-color: transparent;
}

.uni-badge--small {
  transform: $bage-small;
  transform-origin: center center;
}
</style>
